<template>
    <div class="float-block" :id="isFloat?'floatBlock':''" >
        <div class="calendar-block" v-if="isShowCalendar">
            <calendar  @choseDay="clickDay"></calendar>
        </div>

       <div class="info-list">
           <div class="title">{{mainTitle}}</div>
           <div class="main-list-item" @click="$router.push({name: 'misArticle', query:{sno: item.sno }})" v-for="(item,index) in mainList" v-if="index <= 9">
               <div class="number" :class="[index<=2?'red':'']" v-if="!isPoint">{{index + 1}}</div>
               <div class="point" v-else></div>
               <div class="item-info">{{ item.title }}</div>
               <div class="date" v-if="isShowDate">[{{dayjs(item.deploydate).format("YYYY-MM-DD")}}]</div>
           </div>
       </div>

        <div class="info-list" v-if="isShowLink">
            <div class="title">友情链接</div>
            <div class="link-list">
                <div class="link-list-item" v-for="(item,index) in 5" v-if="index <= 9">
                    <div class="point"></div>
                    <div class="item-info">玄武区中小幼教师研修平台</div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import dayjs from "dayjs";
    //引入日历插件
    import Calendar from 'vue-calendar-component';
    export default {
        name: "float-block",
        props:{
            //判断是否是标点前缀
            isPoint:{
                type:Boolean,
                default:false
            },
            //是否展示日历
            isShowCalendar:{
                type: Boolean,
                default: false
            },
            //是否展示友情链接
            isShowLink:{
                type:Boolean,
                default:false
            },
            //列表数据 mainList-主体模块列表 linkList-友情链接列表
            mainList:Array,
            linkList:Array,
            //主体列表标题
            mainTitle:{
                type:String,
                default:'最多游览'
            },
            //是否展示信息时间
            isShowDate:{
                type:Boolean,
                default:false
            },
            //是否固定不滚动  内容过长不建议固定滚动
            isFloat:{
                type:Boolean,
                default:true
            }
        },
      data(){
        return {
          dayjs
        }
      },
        components:{
            Calendar
        },
        methods:{
            /**
             * 日历选中某天
             * @param date
             */
            clickDay(date){
                // console.log(date)
                date = date.replace(/\//g, '-');
            //    调用父组件获取数据方法
                this.$parent.getData(date);
            }
        }
    }
</script>

<style lang="scss" src="./index.scss" scoped>

</style>
